<template>
  <el-row v-loading="loading" class="main">
    <el-col :span="24" class="main">
      <el-card shadow="hover">
        <el-table
          :data="CodeData"
          style="margin-left: 36px; margin-top: 36px"
          :default-sort="{ prop: 'date', order: 'descending' }"
        >
          <el-table-column
            label="开始日期"
            prop="start_time"
            sortable
            align="center"
          >
            <template #default="scope">
              <i class="el-icon-time"></i>

              <span style="margin-left: 10px">{{
                scope.row.accessForm.start_time
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="失效日期"
            prop="finish_time"
            sortable
            align="center"
          >
            <template #default="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{
                scope.row.accessForm.finish_time
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="状态"
            align="center"
            filter-placement="bottom-end"
            :filters="[
              { text: '未审核', value: 0 },
              { text: '已通过', value: 1 },
              { text: '已过期', value: 2 },
              { text: '已拒绝', value: 3 },
            ]"
            :filter-method="stateFilter"
          >
            <template #default="scope">
              <el-tag v-if="scope.row.accessForm.state == 0" type="waning"
                >未审核</el-tag
              >
              <el-tag v-if="scope.row.accessForm.state == 1" type="success"
                >已通过</el-tag
              >
              <el-tag v-if="scope.row.accessForm.state == 2" type="info"
                >已过期</el-tag
              >
              <el-tooltip
                v-if="scope.row.accessForm.state == 3"
                :content="scope.row.accessForm.suggest"
                placement="bottom"
                effect="light"
              >
                <el-tag type="danger">已拒绝</el-tag>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column label="申请人" align="center">
            <template #default="scope">
              <span>{{ scope.row.approval_account.mobile }}</span>
            </template>
          </el-table-column>

          <el-table-column label="详情" align="center">
            <template #default="scope">
              <el-button
                size="mini"
                @click="approval(scope.$index, scope.row)"
                :disabled="scope.row.state == 2"
                >申请人
              </el-button>
              <el-button
                size="mini"
                type="primary"
                @click="host(scope.$index, scope.row)"
                >住户
              </el-button>
              <!-- <el-button size="mini" type="info" @click="pass(scope.$index, 0)"
                >拒绝
              </el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index)"
                >删除
              </el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-col>
  </el-row>

  <el-dialog
    :title="title"
    v-model="dialogVisible"
    width="30%"
    @click="closeDialog('edit')"
  >
    <el-form
      label-width="80px"
      align="center"
      ref="detailForm"
      :model="detailForm"
      :rules="rules"
    >
      <el-form-item label="姓名" prop="name">
        {{ detailForm.user.name }}
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        {{ detailForm.user.age }}
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        {{ detailForm.user.sex }}
      </el-form-item>
      <el-form-item label="住址" prop="address">
        {{ detailForm.user.address }}
      </el-form-item>
      <el-form-item label="手机号码" prop="mobile">
        {{ detailForm.account.mobile }}
      </el-form-item>
      <el-form-item label="身份证" prop="description">
        {{ detailForm.user.idNumber }}
      </el-form-item>
      <el-form-item label="描述" prop="description">
        {{ detailForm.user.description }}
      </el-form-item>
    </el-form>
    <div class="dialog-footer" align="center">
      <el-button size="small" @click="detailFormVisible = false"
        >取消</el-button
      >
      <!-- <el-button
          size="small"
          type="primary"
          :loading="loading"
          class="title"
          @click="submitForm('detailForm')"
          >保存</el-button
        > -->
    </div>
  </el-dialog>
</template>

<script>
import { get } from "@/network/access";
import moment from "moment";

export default {
  name: "AdminTemporary",
  data() {
    return {
      moment,
      CodeData: [],
      loading: false,
      dialogVisible: false,
      index: 0,
      detailForm: {},
      title: "",
    };
  },
  created() {
    get().then(
      (res) => {
        if (res.code == 200) {
          this.CodeData = res.data;
          console.log(this.CodeData);
        } else {
        }
      },
      (err) => {}
    );
  },
  methods: {
    getAll() {
      get()
        .then((res) => {
          this.CodeData = res.data;
          this.loading = false;
        })
        .catch(() => {
          this.$message.error("网络错误");
          this.loading = false;
        });
    },
    approval(index, row) {
      this.title = "申请人信息表";
      this.dialogVisible = true;
      this.detailForm.user = row.approval;
      this.detailForm.account = row.approval_account;
      this.detailForm.host = row.accessForm;
      console.log(this.detailForm);
    },
    host(index, row) {
      this.title = "住户信息表";

      this.dialogVisible = true;
      this.detailForm.user = row.host;
      this.detailForm.account = row.host_account;
      this.detailForm.host = row.accessForm;
      console.log(this.detailForm);
    },
    stateFilter(value, row) {
      return row.accessForm.state === value;
    },
  },
};
</script>

<style scoped>
</style>